<template>
	<view>
		<cu-custom :isBack="true" bgColor="bg-gradual-fff">
			<block slot="content">测试中心</block>
		</cu-custom>
		<u-loading-page :loading="true" loading-text="loading..." v-if="showLoading"></u-loading-page>
		<view v-show="!showLoading">
			<view class="viewbox"></view>
			<view class="chice">
				<view class="group1" @click="goPage(item.url)" v-for="(item, index) in test_list" :key="index">
					<view class="parse1">
						<image :src="item.icon"></image>
					</view>
					<view class="parse2">
						<view class="text1">{{item.name}}</view>
						<view class="text2">{{item.abstract}}</view>
					</view>
					<view class="parse3">
						<button  class="btn1">开始测试</button>
					</view>
				</view>
			</view>
			
			<!-- <view class="a">
				<view class="a1">
					<view class="aa">好评(99+)</view>
					<view class="ab">好评度99.68%</view>
				</view>
				
				<view class="a2">
					<u-tag class="tag1" text="测评挺真实的" bgColor="#62469B" borderColor="#62469B" shape="circle"></u-tag>
					<u-tag class="tag1" text="测评挺真实的" bgColor="#62469B" borderColor="#62469B" shape="circle"></u-tag>
					<u-tag class="tag1" text="测评挺真实的" bgColor="#62469B" borderColor="#62469B" shape="circle"></u-tag>
				</view>
				
				<view class="a3">
					<u-avatar :src="src" shape="circle" icon="red-packet-fill" class="avatar"></u-avatar>
					<view class="name">木木同学</view>
					<view class="ping"><u-rate  disabled active-color="#FBC509" :count="count" v-model="value" ></u-rate></view>
				</view>
				
				<view class="a4">
					

				</view>
			</view> -->
			
		</view>	
	</view>
</template>
<script>
import request from '@/common/request.js';
export default {
	data() {
		return {
			showLoading:true,
			test_list:[]
		}
	},
	mounted() {
		this.home_config_post();
	},
	methods: {
		goPage(url) {
			if (!this.$util.isLogin()) {
				return;
			}
			uni.navigateTo({
				url
			});
		},
		home_config_post(){
			let paramsList = {
				uid:this.uid
			}
			let optsList = {
				url: 'i-home',
				method: 'post'
			};
			let _this=this;
			request.httpRequest(optsList, paramsList).then(res => {
				if(res.data.code == 200){
					_this.test_list=res.data.data.test_list;
				}
				_this.showLoading=false;
			});
		},
	}
}
</script>

<style  lang="scss" scoped>
	.chice{
		overflow: hidden;
		margin-top: 46rpx;
	}
	.group1{
		margin: auto;
		margin-bottom: 15rpx;
		padding-top: 31rpx;
		padding-left: 41rpx;
		width: 700rpx;
		height: 190rpx;
		display: flex;
		// background: #210B2A;
		border-radius: 20rpx;
		// border: 1px solid;
		// border-image: linear-gradient(0deg, #694F63, #4E2B61) 1 1;
		// background: salmon;
		box-shadow: inset 0 0 20rpx 20rpx rgba(85, 56, 105, 0.6);
	}
	.parse1{
		// padding-top: 31rpx;
		// padding-left: 41rpx;
		width: 128rpx;
		height: 128rpx;
		border-radius: 50%;
	}
	.parse1 image{
		width: 128rpx;
		height: 128rpx;
		border-radius: 50%;
	}
	.parse2{
		margin-left: 34rpx;
	}
	.text1{
		margin-top: 25rpx;
		font-family: PingFang SC;
		font-weight: 500;
		font-size: 32rpx;
		color: #ffffff;
		line-height: 36rpx;
	}
	.text2{
		margin-top: 29rpx;
		font-family: PingFang SC;
		font-weight: 500;
		font-size: 24rpx;
		color: #cccccc;
		line-height: 24rpx;
	}
	.btn1{
		margin-left: 50rpx;
		margin-top: 37rpx;
		width: 160rpx;
		height: 56rpx;
		background: linear-gradient(0deg, #DFE6E5, #FFFFFF, #DFE6E5);
		border-radius: 28rpx;
		font-family: PingFang SC;
		font-weight: 500;
		font-size: 24rpx;
		color: #000000;
		// line-height: 36rpx;
	}
	
	.group2{
		margin: 15rpx 25rpx 0rpx 25rpx;
		padding-top: 31rpx;
		padding-left: 41rpx;
		width: 700rpx;
		height: 190rpx;
		display: flex;
		// background: #210B2A;
		border-radius: 20rpx;
		// border: 1px solid;
		// border-image: linear-gradient(0deg, #694F63, #4E2B61) 1 1;
		// background: salmon;
		box-shadow: inset 0 0 20rpx 20rpx rgba(85, 56, 105, 0.6);
	}
	.p1{
		// padding-top: 31rpx;
		// padding-left: 41rpx;
		width: 128rpx;
		height: 128rpx;
		background: linear-gradient(0deg, #D2B5C6, #F7E2FA);
		border-radius: 50%;
	}
	.p2{
		margin-left: 34rpx;
	}
	.t1{
		margin-top: 10rpx;
		font-family: PingFang SC;
		font-weight: 500;
		font-size: 32rpx;
		color: #ffffff;
		line-height: 36rpx;
	}
	.t2{
		margin-top: 29rpx;
		font-family: PingFang SC;
		font-weight: 500;
		font-size: 24rpx;
		color: #cccccc;
		line-height: 24rpx;
	}
	.btn2{
		margin-left: 50rpx;
		margin-top: 37rpx;
		width: 160rpx;
		height: 56rpx;
		background: linear-gradient(0deg, #DFE6E5, #FFFFFF, #DFE6E5);
		border-radius: 28rpx;
		font-family: PingFang SC;
		font-weight: 500;
		font-size: 24rpx;
		color: #000000;
		// line-height: 36rpx;
	}
	
	.group3{
		margin: 15rpx 25rpx 0rpx 25rpx;
		padding-top: 31rpx;
		padding-left: 41rpx;
		width: 700rpx;
		height: 190rpx;
		display: flex;
		// background: #210B2A;
		border-radius: 20rpx;
		// border: 1px solid;
		// border-image: linear-gradient(0deg, #694F63, #4E2B61) 1 1;
		// background: salmon;
		box-shadow: inset 0 0 20rpx 20rpx rgba(85, 56, 105, 0.6);
	}
	.pa1{
		// padding-top: 31rpx;
		// padding-left: 41rpx;
		width: 128rpx;
		height: 128rpx;
		background: linear-gradient(0deg, #D2B5C6, #F7E2FA);
		border-radius: 50%;
	}
	.pa2{
		margin-left: 34rpx;
	}
	.te1{
		margin-top: 10rpx;
		font-family: PingFang SC;
		font-weight: 500;
		font-size: 32rpx;
		color: #ffffff;
		line-height: 36rpx;
	}
	.te2{
		margin-top: 29rpx;
		font-family: PingFang SC;
		font-weight: 500;
		font-size: 24rpx;
		color: #cccccc;
		line-height: 24rpx;
	}
	.btn3{
		margin-left: 50rpx;
		margin-top: 37rpx;
		width: 160rpx;
		height: 56rpx;
		background: linear-gradient(0deg, #DFE6E5, #FFFFFF, #DFE6E5);
		border-radius: 28rpx;
		font-family: PingFang SC;
		font-weight: 500;
		font-size: 24rpx;
		color: #000000;
		// line-height: 36rpx;
	}
	
	.group4{
		margin: 15rpx 25rpx 0rpx 25rpx;
		padding-top: 31rpx;
		padding-left: 41rpx;
		width: 700rpx;
		height: 190rpx;
		display: flex;
		// background: #210B2A;
		border-radius: 20rpx;
		// border: 1px solid;
		// border-image: linear-gradient(0deg, #694F63, #4E2B61) 1 1;
		// background: salmon;
		box-shadow: inset 0 0 20rpx 20rpx rgba(85, 56, 105, 0.6);
	}
	.par1{
		// padding-top: 31rpx;
		// padding-left: 41rpx;
		width: 128rpx;
		height: 128rpx;
		background: linear-gradient(0deg, #D2B5C6, #F7E2FA);
		border-radius: 50%;
	}
	.par2{
		margin-left: 34rpx;
	}
	.tex1{
		margin-top: 10rpx;
		font-family: PingFang SC;
		font-weight: 500;
		font-size: 32rpx;
		color: #ffffff;
		line-height: 36rpx;
	}
	.tex2{
		margin-top: 29rpx;
		font-family: PingFang SC;
		font-weight: 500;
		font-size: 24rpx;
		color: #cccccc;
		line-height: 24rpx;
	}
	.btn4{
		margin-left: 50rpx;
		margin-top: 37rpx;
		width: 160rpx;
		height: 56rpx;
		background: linear-gradient(0deg, #DFE6E5, #FFFFFF, #DFE6E5);
		border-radius: 28rpx;
		font-family: PingFang SC;
		font-weight: 500;
		font-size: 24rpx;
		color: #000000;
		// line-height: 36rpx;
	}
	.a{
		margin-top: 23rpx;
		width: 750rpx;
		height: 758rpx;
		padding: 52rpx 0rpx 0rpx 31rpx ;
		border-radius: 20rpx;
		box-shadow: inset 0 0 20rpx 20rpx #583770;
	}
	.a1{
		display: flex;
	}
	.aa{
		font-family: PingFang SC;
		font-weight: 800;
		font-size: 36rpx;
		color: #FFFFFF;
		// line-height: 100rpx;
	}
	.ab{
		font-family: PingFang SC;
		margin-left: 328rpx;
		font-weight: 500;
		font-size: 28rpx;
		color: #D2B7DF;
		line-height: 50rpx;
	}
	.a2{
		display: flex;
		margin-top: 48rpx;
		
		
	}
	.tag1{
		// width: 210rpx;
		margin-left: 20rpx;
	}
	.a3{
		display: flex;
		margin-top: 43rpx;
	}
	.name{
		position: absolute;
		font-family: PingFang SC;
		font-weight: 800;
		font-size: 30rpx;
		color: #FFFFFF;
		// line-height: 72rpx;
		margin-top: 9rpx;
		margin-left: 106rpx;
	}
	.ping{
		position: absolute;
		margin-left: 480rpx;
		margin-top: 13rpx;
	}
</style>